<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<title>  主页  - intlsy-neko </title>
	<link rel="stylesheet" type="text/css" href="src/Semantic-UI/semantic.min.css" />
	<script src="src/jquery/jquery.js"> </script>
	<script src="src/jquery/jquery.form.min.js"> </script>
	<script src="src/Semantic-UI/semantic.min.js"></script>
	<script src="src/art-template/template-web.js"></script>

	<script src="src/core.js"> </script>
	<script> InitCore() </script>
	
	<style>
	.ui.header > .icon{
		font-size: 1em !important;
	}
	div.word_button_sidebyside{
		display: flex;
		justify-content: space-between;

	}
	</style>
</head>
<body style="position: relative; margin-top: 30px; height: calc(100% - 30px); overflow-y: overlay; background-color: #f6f6f6">
	<div id="root">
		<div class="ui top borderless menu fixed">
			<div class="ui container">
				<a class="item" href="/" style="font-weight: 700; font-size: 16px; padding-top: 0px; padding-bottom: 0px;"> intlsy neko </a>
				<a class="item" href="/"><i aria-hidden="true" class="home active icon"></i>首页</a>
				<a class="item" href="/notebook.html"><i aria-hidden="true" class="pencil icon"></i>Notebook</a>
				<a class="item" href="/novel.html"><i aria-hidden="true" class="book icon"></i>英文小说</a>
				<a class="item" href="/settings.html"><i aria-hidden="true" class="cogs icon"></i>选项</a>
				<!-- <a class="item" href="/errbook.html"><i aria-hidden="true" class="book icon"></i>错题本</a> -->
			</div>
		</div>
		<div class="ui doubling stackable grid container">
			
<div class="ui centered column">
	<h4 class="ui block top attached header">
		<i class="clock alternate outline icon"> </i>
		<div class="content"> 当前时间 </div>
	</h4>
	<div class="ui bottom attached center aligned segment" style="font-size: 12px;">
		<div style="margin-top: 2px">
			<span id="nowtime-month" style="font-size: 18px"></span> 月
			<span id="nowtime-date" style="font-size: 18px"></span> 日
		</div>
		<div style="margin-top: 10px; font-size: 20px">
			<span id="nowtime-hours" style="font-size: 30px"></span> :
			<span id="nowtime-minutes" style="font-size: 30px"></span> :
			<span id="nowtime-seconds" style="font-size: 30px"></span>
		</div>
		<script>
			function UpdateNowtime(){
				function ToFixedLength(x){ return x < 10 ? "0"+x : x; }
				var date = new Date();
				$("#nowtime-month").text(date.getMonth()+1)
				$("#nowtime-date").text(date.getDate())
				$("#nowtime-hours").text(ToFixedLength(date.getHours()))
				$("#nowtime-minutes").text(ToFixedLength(date.getMinutes()))
				$("#nowtime-seconds").text(ToFixedLength(date.getSeconds()))
			}
			function UpdateNowtimeD(){
				UpdateNowtime();
				setInterval(function(){UpdateNowtimeD()},1000)
			}
			UpdateNowtimeD()
		</script>
	</div>

	<h4 class="ui block top attached header">
		<i class="quote left icon"> </i>
		<div class="content" style="width: 100%;"> <div style="width: 100%; display: flex; justify-content: space-between"> 一言 <i id="hitokoto-refresh" style="opacity: 0.3; position: relative; left: 12" class="refresh icon"></i> </div> </div>
	</h4>
	<div class="ui bottom attached center aligned segment">
		<div id="hitokoto-content" style=""></div>
		<div id="hitokoto-from" style=""></div>
	</div>
	<script>
		function RefreshHitokoto(){
			$.get('https://v1.hitokoto.cn/?encode=json',function(data){
				$('#hitokoto-content').text(data.hitokoto);
				if(data.from)
					$('#hitokoto-from').text('—— ' + data.from);
			})
		}
		RefreshHitokoto()
		$("#hitokoto-refresh").click(function(){RefreshHitokoto()})
	</script>

	<h4 class="ui block top attached header">
		<i class="calendar alternate outline icon"> </i>
		<div class="content"> 距离高考还有 </div>
	</h4>
	<div class="ui bottom attached center aligned segment" style="font-size: 12px;">
		<div style="margin-top: 6px">
			<span id="countdown-days" style="font-size: 30px"></span> 天
		</div>
		<div style="margin-top: 6px;">
			<span id="countdown-hours" style="font-size: 18px"></span> 小时
			<span id="countdown-minutes" style="font-size: 18px"></span> 分钟
			<span id="countdown-seconds" style="font-size: 18px"></span> 秒
		</div>
		<script>
			function UpdateCountdown(){
				var endDate = new Date('Mon Jun 07 2021 09:00:00 GMT+0800 (中国标准时间)')
				var startDate = new Date();
				var duration = endDate - startDate;
				var daysLeft = Math.floor( duration / (1000*60*60*24) );
				var hoursLeft = Math.floor( duration % (1000*60*60*24) / (1000*60*60) );
				var minutesLeft = Math.floor( duration % (1000*60*60) / (1000*60) );
				var secondLeft = Math.floor( duration % (1000*60) / (1000) );
				var countdownString = String(daysLeft)
				$("#countdown-days").text(daysLeft)
				$("#countdown-hours").text(hoursLeft)
				$("#countdown-minutes").text(minutesLeft)
				$("#countdown-seconds").text(secondLeft)
			}
			function UpdateCountdownD(){
				UpdateCountdown();
				setInterval(function(){UpdateCountdownD()},1000)
			}
			setInterval(function(){UpdateCountdownD()},10)
		</script>
	</div>
</div>

		</div>
	</div>
	<script> RenderSemanticUI() </script>
</body>
</html>